* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
  background-color: var(--color-bg-1);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  --o-font-size-info: 14px;
  --o-color-primary: #e32020;
  --o-color-primary-secondary: #e41d1d;
}

#app {
  background: var(--color-bg-2);
}

.el-button.is-text {
  .el-icon svg {
    color: #e41d1d;
  }

  .el-icon+span {
    color: #e41d1d;
  }
}

.arco-message-list-top {
  left: 0;
}

.arco-btn-primary[type='button'] {
  color: var(--color-bg-2);

  &:hover {
    color: var(--color-bg-2);
  }

  &.arco-btn-loading {
    color: var(--color-bg-2);
  }
}

.arco-steps-item-process .arco-steps-icon {
  color: var(--color-bg-1);
}

.arco-checkbox-icon-check {
  color: var(--color-bg-1);
}

.arco-checkbox-icon::after {
  background: var(--color-bg-1);
}

.mr-s {
  margin-right: 8px;
}

.success-color {
  color: var(--o-color-success)
}

.danger-color {
  color: var(--o-color-danger)
}